<!-- 生产报工记录信息明细页面 -->
<template>
	<view>
		<newNavBar rightCustomPrefix="my-iconfont" :rightIcon="rightIcon" @clikeRight="filterOpen"></newNavBar>

		<view style="">
			<listView ref="listView" :swiperHeight="swiperHeight" scrollY="true" @scrolltolower="scrolltolower"
				:headData="headInfo" :listData="userBGListInfo" :loadMore="loadMore" :loadStaus="loadStaus"
				@longPress="longpress" :isMultSelect="isMultSelect" @delSelectInfo="delSelectInfo">
				<template v-slot="{ msg }">
					<!-- <view style="height: 28px;">
						<view style="position: absolute; right: 20px; padding-left: 10px;">
							<uni-icons :size="30" color="#ba251e" @click="delInfo(msg)" type="trash-filled"></uni-icons>
						</view>
					</view> -->
				</template>
			</listView>
		</view>
	</view>

	<!-- 右侧筛选框界面 -->
	<uni-drawer ref="showRight" mode="right" :width="windowWidth">
		<view class="close" :style="{ backgroundColor: '#fff',marginTop: StatusBar+'px'}">
			<filterView @clikeLeft="closeDrawer" @reset="reset" @query="query">
				<uni-forms ref="baseForm" :modelValue="queryData" class="content" label-position="top">
					<uni-forms-item label="报工日期" name="date" :labelWidth="labelWidth" required>
						<uni-datetime-picker type="daterange" :clear-icon="false" v-model="queryData.date" />
					</uni-forms-item>
					<uni-forms-item label="工序名称" name="gxCode" :labelWidth="labelWidth" required>
						<uni-data-select v-model="queryData.gxCode" :localdata="baseRangeInfo.gxRange"
							@change="change($event,'gx')" />
					</uni-forms-item>
					<uni-forms-item label="班组名称" name="groupCode" :labelWidth="labelWidth" required>
						<uni-data-select v-model="queryData.groupCode" :localdata="baseRangeInfo.groupRange"
							@change="change($event,'')" />
					</uni-forms-item>
					<!-- <uni-forms-item label="人员编码" name="userCode" :labelWidth="labelWidth" required>
						<uni-easyinput v-model="queryData.userCode"></uni-easyinput>
					</uni-forms-item> -->
					<!-- <uni-forms-item label="人员名称" name="userName" :labelWidth="labelWidth" required>
						<uni-easyinput v-model="queryData.userName"></uni-easyinput>
					</uni-forms-item> -->
					<!-- <uni-forms-item label="派工单号" name="pKey" :labelWidth="labelWidth" required>
						<uni-easyinput v-model="queryData.pKey"></uni-easyinput>
					</uni-forms-item> -->
				</uni-forms>

			</filterView>
		</view>
	</uni-drawer>

	<uni-popup ref="alertDialog" type="dialog">
		<commonDiaog></commonDiaog>
	</uni-popup>
</template>

<script>
	import * as SystemJs from '../../common/system.js'
	import * as configJs from '../../common/config.js'
	export default {
		data() {
			return {
				pageCode: '',
				bgCode: '', //报工单号
				pageType: '',
				mainColor: '',
				//添加报工数据信息
				baseFormData: {
					pgCode: '',
					number: '',
					disNumber: '',
					happenDate: ''
				},
				//查询数据信息
				queryData: {
					pKey: '',
					gxCode: '',
					groupCode: '',
					date: '',
					userCode: '',
					userName: ''
				},
				baseRangeInfo: {
					gxRange: [],
					groupRange: []
				},
				current: 0,
				items: [],
				labelWidth: 80,
				rightIcon: '',
				//滑动区域的高度(单位px)
				swiperHeight: 0,
				windowWidth: 0,
				StatusBar: 0,
				userListInfo: [],
				//悬浮按钮进行移动
				x: 0,
				y: 0,
				//悬浮按钮的样式设置
				pattern: {
					color: '#000',
					backgroundColor: '#fff',
					selectedColor: '#000',
					buttonColor: configJs.baseColor.mainTitleColor,
					iconColor: '#fff'
				},
				loadMore: true, //是否显示加载更多
				loadStaus: 'noMore', //是否显示加载状态
				sumPages: 1, //列表总页数
				page: 1, //当前数据加载页
				userInfo: {},
				listInfo: [], //显示信息列表
				userBGListInfo: [],
				addBGIndex: 0, //当前点击添加报工记录的索引
				operationType: '', //操作类型
				isMultSelect: false
			}
		},
		onLoad(res) {
			this.bgCode = res.bgCode;
			this.pageCode = res.pageCode;
			//进入报工列表的操作类型
			if (res.operationType && !SystemJs.systemJs.IsEmpty(res.operationType)) {
				this.operationType = res.operationType;
			}
			SystemJs.systemJs.showTitleBar(res.pageName, true)
			this.mainColor = configJs.baseColor.mainTitleColor;
			//设置默认日期
			this.baseFormData.happenDate = SystemJs.systemJs.getDate()
			if (this.pageCode == "prws") {
				this.rightIcon = 'icon-shaixuan';
			}
			this.userInfo = configJs.getBaseInfo.getUserInfo();
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.x = res.windowWidth * 0.7;
					this.y = res.windowHeight * 0.8
					this.windowWidth = res.windowWidth;
					var statusBar = res.statusBarHeight //状态栏高度
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.swiperHeight = res.screenHeight - statusBar - 45
					this.StatusBar = statusBar
					console.log('heightShow', this.swiperHeight)
				}
			})

			this.getListInfo();
			this.getCommRangeInfo();
		},
		methods: {
			async getGroupInfo(pgxCode) {
				//获取班组数据信息
				this.baseRangeInfo.groupRange = await configJs.getBaseInfo.getGXGroupInfo({
					pgxCode: pgxCode
				});
				// this.baseFormData.groupCode = SystemJs.systemJs.selectDefaultRage(this.baseRangeInfo.groupRange,
				// 	[])
			},
			async getCommRangeInfo() {
				//获取工序数据信息
				this.baseRangeInfo.gxRange = await configJs.getBaseInfo.getGXInfo();
				// this.baseFormData.gxCode = SystemJs.systemJs.selectDefaultRage(this.baseRangeInfo.gxRange, [])
				//获取班组数据信息
				await this.getGroupInfo();
			},
			/**
			 * 获取列表信息
			 */
			getListInfo(isFirst = true, pageIndex = 1) {
				if (isFirst) {
					this.clearListInfo();
				}
				var obj = {};
				obj = SystemJs.systemJs.copyObject(this.queryData)
				obj.operateType = this.pageType;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				obj.bgCode = this.bgCode;
				obj.mobType = "H5";
				obj.pageIndex = pageIndex;
				obj.selectIndex = this.addBGIndex; //选择定位的索引
				var createuser = '';
				if (this.userInfo.userCode) {
					createuser = this.userInfo.userCode;
				}
				obj.createuser = createuser;
				if (this.pageCode == "prws") {
					obj.userCode = this.userInfo.userCode;
				}
				SystemJs.httpUnit.requestCryptoPost({
					url: 'App/GetProductBaoGongInfos',
					data: obj
				}).then((res) => {
					if (res.Result) {
						var obj = res.Data;
						this.sumPages = Number(obj.listInfo.pageNumber);
						this.page = Number(obj.listInfo.pageIndex);
						this.headInfo = obj.listInfo.head;
						if (!isFirst) {
							// var tempList = SystemJs.unitJs.createListItemInfo(obj.listInfo.head, obj.listInfo.list);
							// this.listInfo = this.listInfo.concat(tempList);
							this.userBGListInfo = this.userBGListInfo.concat(obj.listInfo.list);
						} else {
							// this.listInfo = SystemJs.unitJs.createListItemInfo(obj.listInfo.head, obj.listInfo
							// 	.list);
							this.userBGListInfo = obj.listInfo.list;
						}
						// this.sumList = this.createListItemInfo(obj.sumList.head, obj.sumList.list);
						this.$nextTick(() => {
							if (this.addBGIndex > 0) {
								this.$refs.listView.autoScrollRow(this.addBGIndex);
							}
							this.addBGIndex = 0;
							// SystemJs.systemJs.getByIdHeight("listTop", this, 'listSumHeight');
						})
						this.loadStaus = "noMore";
					} else {
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
						this.clearListInfo();
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			},
			/**
			 * 清除列表字段信息
			 */
			clearListInfo() {
				this.listSumHeight = 0;
				this.listInfo = [];
				this.userBGListInfo = [];
				this.sumList = [];
				this.loadMore = true;
				this.loadStaus = "noMore";
				this.page = 1;
				this.sumPages = 1;
			},
			/**
			 * swiperView滑动到底部监听事件
			 * @param {Object} e
			 */
			scrolltolower(e) {
				console.log("滚动到底部");
				this.loadMore = false;
				if (this.page >= this.sumPages) {
					this.loadStaus = "noMore";
				} else {
					this.loadStaus = "loading";
					// this.page++;
					var page = this.page + 1;
					var timeout = setTimeout(() => {
						this.getListInfo(false, page);
						clearTimeout(timeout);
					}, 1000)
				}
				this.loadMore = true;
			},
			//获取列表内容中每行的个数
			getListContent(content) {
				var count = 0;
				if (content.length > 0) {
					count = 24 / content.length
				}
				return count;
			},
			/**
			 * 列表item长按事件
			 * @param {Object} index
			 */
			longpress(index) {
				this.addBGIndex = index;
				if (this.operationType == "add") {
					this.isMultSelect = true;
					// this.delInfo(index);
				}
			},
			/**
			 * 多选删除事件
			 * @param {Object} arr
			 */
			delSelectInfo(arr) {
				console.log(arr)
				if(arr==undefined||arr.length<1){
					SystemJs.httpUnit.uniToast("请先勾选数据");
					return;
				}
				var keyCodes = "";
				for (var i = 0; i < arr.length; i++) {
					var index = arr[i];
					var info = this.userBGListInfo[index];
					if (info != undefined) {
						keyCodes+=info.id+",";
					}
				}
				console.log(keyCodes)
				this.delInfo(keyCodes);
			},
			/**
			 * 删除报工主表信息
			 * @param {Object} index
			 */
			delInfo(keyCodes) {
				// var info = this.userBGListInfo[index];
				if (keyCodes != undefined&&!SystemJs.systemJs.IsEmpty(keyCodes)) {
					var data = {};
					data.keyCode = keyCodes;
					data.isMain = false;
					var createuser = '';
					if (this.userInfo.userCode) {
						createuser = this.userInfo.userCode;
					}
					data.loginUserCode = createuser;
					var obj = SystemJs.showDialog.dialogInfo
					obj.msgType = "warn";
					obj.title = "提示";
					obj.content = "确定要删除该明细记录吗？";
					obj.cancel = true;
					obj.confirm = true;
					obj.dialogConfirm(() => {
						SystemJs.httpUnit.requestCryptoPost({
							url: 'App/DelProductBaoGong',
							data: data,
							isLoading: true
						}).then((res) => {
							if (res.Result) {
								this.isMultSelect = false;
								this.getListInfo();
							} else {
								SystemJs.httpUnit.uniToast(res.Message);
							}
						}).catch((err) => {
							SystemJs.httpUnit.uniToast(JSON.stringify(err));
						})
					})
					obj.dialogClose(() => {

					})
					SystemJs.showDialog.openDialog(this.$refs.alertDialog, obj)
				}
			},
			change(e, type) {
				if (type != undefined && type == "gx") {
					console.log(e)
					if (!SystemJs.systemJs.IsEmpty(e)) {
						var selectPGXCode = SystemJs.systemJs.selectRage(this.baseRangeInfo.gxRange, e)
						if (selectPGXCode) {
							this.getGroupInfo(selectPGXCode.pgxCode);
						}
					} else {
						this.getGroupInfo();
					}
				}
			},
			//打开日期选择器
			open() {
				this.$nextTick(() => {
					this.$refs.happenDate.open();
				})
			},
			//选择日期确认事件
			confirm(e) {
				console.log(e);
				try {
					this.baseFormData.happenDate = e.fulldate
				} catch (e) {
					console.log(e);
				}
			},
			closeDrawer() {
				this.closeRefs('showRight')
			},
			///状态栏右侧图标点击事件
			filterOpen() {
				this.openRefs('showRight')
			},
			//打开控件窗体
			openRefs(e) {
				this.$nextTick(() => {
					this.$refs[e].open()
				})
			},
			//关闭控件窗体
			closeRefs(e) {
				this.$refs[e].close()
			},
			//重置事件
			reset() {
				SystemJs.unitJs.clearObject(this.queryData);
			},
			//查询事件
			query() {
				this.getListInfo();
				console.log('baseForm', this.queryData)
				this.closeRefs('showRight')
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	/* 修改form表单列样式 缩小间距*/
	.uni-forms-item {
		margin-bottom: 0px;
	}

	/* 我们需要在 style 标签上加 scoped，同时使用 deep 穿透  才能修改覆盖了子组件的样式，否则无法在父组件中修改子组件样式*/
	/deep/ .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding: 0px;
	}
</style>
